<template>
	<view class="orderDetails_item" :style="{ paddingTop: marginTp + 'px' }">
		<tui-navigation-bar maxOpacity="0" :titleSize="18" :titleLineHeight="18" :titlefontWeight="800"
			@init="initNavigation" title="详情" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<!-- 0全部，1，邀约中，2已确认，3待开始，4服务中，5待评价 6已完成 7 已关闭 8拒绝 -->
		<view :class="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===6 ? 'title titleEnd':'title'">
			<view :class="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===5 ? 'title_lt':'title_lt title_ct'">
				<view class="titleLt_Tp" v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===4">
					<image class="icon" src="/static/tutor/order/icon_fuwuzhong@2x.png"></image>
					<view class="text"><text>服务中</text></view>
				</view>
				<view class="titleLt_Tp" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1*1===3">
					<image class="icon" src="/static/tutor/order/icon_daikaishi@2x.png"></image>
					<view class="text"><text>待开始</text></view>
				</view>
				<view class="titleLt_Tp" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===5">
					<image class="icon" src="/static/tutor/order/icon_daipingjia@2x.png"></image>
					<view class="text"><text>待评价</text></view>
				</view>
				<view class="titleLt_Tp" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===8">
					<image class="icon" src="/static/tutor/order/icon_daipingjia@2x.png"></image>
					<view class="text"><text>已拒绝</text></view>
				</view>
				<view class="titleLt_Tp" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===6">
					<image class="icon" src="/static/tutor/order/icon_yiwancheng@2x.png"></image>
					<view class="text"><text>已完成</text></view>
				</view>
				<view class="titleLt_Tp" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===2">
					<view class="text"><text>已确认</text></view>
				</view>
				<view class="titleLt_Bt" v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===4">
					<view class="lt"><text>{{countdown}}</text></view>
					<view class="rt"><text>后结束服务</text></view>
				</view>
			</view>
			<view class="title_rt" v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1!==8">
				<view class="rt_t"><text>￥{{orderDetails.ordersVo&&orderDetails.ordersVo.actualAmount}}</text></view>
				<view class="rt_b"><text>预计收入</text></view>
			</view>
		</view>
		<view class="times">
			<view class="timeA">
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="time">{{orderDetails.ordersVo&&orderDetails.ordersVo.orderTime}}</view>
					<view class="text">客户预约</view>
				</view>
			</view>
			<view :class="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===3 ? 'timeB active':'timeB'">
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="time">{{orderDetails.invite&&orderDetails.invite.affirmTime}}</view>
					<view class="text">接单</view>
				</view>
			</view>
			<view :class="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===4 ? 'timeC active':'timeC'">
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="time">{{orderDetails.invite&&orderDetails.invite.serviceTime}}</view>
					<view class="text">服务开始</view>
				</view>
			</view>
			<view class="timeD active" v-if="orderDetails.ordersVo&&orderDetails.invite.status*1===6">
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="time">{{orderDetails.invite&&orderDetails.invite.completionTime}}</view>
					<view class="text">服务结束</view>
				</view>
			</view>
			<view class="timeD actives" v-else-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===5">
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="time">{{orderDetails.invite&&orderDetails.invite.completionTime}}</view>
					<view class="text">服务结束</view>
				</view>
			</view>
			<view class="timeD" v-else>
				<view class="lt">
					<view class="oridus activer"></view>
				</view>
				<view class="rt activet">
					<view class="text">服务结束</view>
				</view>
			</view>
		</view>
		<view class="orderInfo">
			<view class="orderInfoTitle">
				<view class="lt"></view>
				<view class="rt"><text>订单信息</text></view>
			</view>
			<view class="orderInfoContent">
				<view class="item">
					<view class="iteml"><text>订单号</text></view>
					<view class="itemr icon">
						<view><text>{{orderDetails.ordersVo&&orderDetails.ordersVo.id}}</text></view>
						<image class="iconimg" src="/static/tutor/order/icon_copy@2x.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="iteml"><text>支付金额</text></view>
					<view class="itemr"><text>￥{{orderDetails.ordersVo&&orderDetails.ordersVo.actualAmount}}</text>
					</view>
				</view>
				<view class="item">
					<view class="iteml"><text>支付方式</text></view>
					<view class="itemr"><text>{{orderDetails.ordersVo&&orderDetails.ordersVo.payPlatform}}</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>预约时间</text></view>
					<view class="itemr"><text>{{orderDetails.invite&&orderDetails.invite.reserve_date}}
							{{orderDetails.invite&&orderDetails.invite.reserveBeginTime}}—{{orderDetails.invite&&orderDetails.invite.reserve_date}}
							{{orderDetails.invite&&orderDetails.invite.reserveEndTime}}</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>预约时长</text></view>
					<view class="itemr"><text>{{orderDetails.invite&&orderDetails.invite.hourNumber}}小时</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>服务地址</text></view>
					<view class="itemr icon">
						<view><text>{{orderDetails.invite&&orderDetails.invite.inviteMerchant.address}}</text></view>
						<image class="iconimg" src="/static/tutor/order/icon_edit@2x.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="iteml"><text>车程计价</text></view>
					<view class="itemr"><text>{{orderDetails.ordersVo&&orderDetails.ordersVo.transportFeeUnitPrice||0}}元/km</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>全程</text></view>
					<view class="itemr"><text>{{orderDetails.ordersVo&&orderDetails.ordersVo.distance || 0}}km</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>车费</text></view>
					<view class="itemr"><text>￥{{orderDetails.ordersVo&&orderDetails.ordersVo.transportFee || 0}}</text></view>
				</view>
			</view>
		</view>
		<view class="clientInfo">
			<view class="clientInfoTitle">
				<view class="lt"></view>
				<view class="rt"><text>客户信息</text></view>
			</view>
			<view class="clientInfoContent">
				<view class="item">
					<view class="iteml"><text>联系人</text></view>
					<view class="itemr"><text>{{orderDetails.invite&&orderDetails.invite.appellation}}</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>联系电话</text></view>
					<view class="itemr"
						v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1!==1 && orderDetails.ordersVo&&orderDetails.ordersVo.status*1!==2">
						<text>{{orderDetails.invite&&orderDetails.invite.subscribePhone}}</text>
					</view>
				</view>
				<view class="item">
					<view class="iteml"><text>邀约类型</text></view>
					<view class="itemr"><text>{{orderDetails.invite&&orderDetails.invite.reserveType}}</text></view>
				</view>
				<view class="item">
					<view class="iteml"><text>备注</text></view>
					<view class="itemr"><text>{{orderDetails.invite&&orderDetails.invite.remark}}</text></view>
				</view>
			</view>
		</view>
		<view class="takeOrder" v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===4">
			<tui-form-button @click="finishOrder" width="680rpx" size="28" height="84rpx" background="#63d6d3"
				radius="100rpx">结束服务</tui-form-button>
		</view>
		<view class="takeOrders" v-if="orderDetails.ordersVo&&orderDetails.ordersVo.status*1===3">
			<tui-form-button @click="caclOrder" width="320rpx" size="28" height="84rpx" plain background="#63d6d3"
				color="#63d6d3" radius="100rpx">取消订单</tui-form-button>
			<tui-form-button @click="startServe" margin="0 0 0 20rpx" width="320rpx" size="28" height="84rpx"
				background="#63d6d3" radius="100rpx">开始服务</tui-form-button>
		</view>
		<tutor-service :tutorServiceTitle="tutorServiceTitle" ref="tutorServiceRed" :ossUrl="ossUrl" @clear="clear"
			@confirm="handleConfirm" :top="top" :visible="tutorServiceShow"></tutor-service>
	</view>
</template>

<script>
	import {
		getOrderDetails,
		cancelOrder,
		tutorOrderAcess,
		tutorOrderEnd
	} from '@/http/api/order/order.js'
	export default {
		// 状态 0全部，1，邀约中，2已确认，3待开始，4服务中，5待评价 6已完成 7 已关闭 8拒绝
		name: 'orderDetails_item',
		data() {
			return {
				orderDetails: {},
				top: 0,
				orderId: '',
				marginTp: 0,
				tutorServiceShow: false,
				status: null, //状态
				timeServal: null,
				tutorServiceTitle: '打卡图',
				ossUrl: getApp().globalData.ossurl, //图片前缀
				countdown: ''
			};
		},
		onLoad(options) {
			if (options) {
				this.orderId = options.orderId
				this.getData()
			}
		},

		onUnload() {
			// 在页面卸载时清除定时器
			if (this.timeServal !== null) {
				clearInterval(this.timeServal);
				this.timeServal = null; // 清空定时器ID
				console.log("定时器已销毁");
			}
		},
		methods: {
			clear() {
				this.tutorServiceShow = false
			},
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
					delta: 1
				});;
			},
			getData() {
				if (this.timeServal !== null) {
					clearInterval(this.timeServal);
					this.timeServal = null; // 清空定时器ID
					console.log("定时器已销毁");
				}
				getOrderDetails(this.orderId).then(res => {
					if (res.code === 200) {
						this.orderDetails = res.data
						this.status = res.data.ordersVo && res.data.ordersVo.status || null
						let time = this.$utils.addOneHour(res.data.invite.serviceTime, res.data.invite.hourNumber)
						this.timeServal = setInterval(() => {
							this.countdown = this.getCountdown(time);
						}, 1000);
					}
				})
			},
			getCountdown(endTime) {
				const targetDate = new Date(endTime.replace(' ', 'T')); // 将目标时间转换为 Date 对象
				const now = new Date(); // 获取当前时间
				let timeDiff = targetDate - now; // 计算剩余时间的毫秒数

				// 如果目标时间已经过去，返回 0
				if (timeDiff <= 0) {
					return "00:00:00";
				}

				// 计算时分秒
				const hours = Math.floor(timeDiff / (1000 * 60 * 60));
				const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

				// 格式化为时分秒格式
				return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},

			// 补零函数，确保小时、分钟和秒数是两位数
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			//结束服务
			finishOrder() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认结束此订单服务',
					showCancel: true,
					cancelColor: "#555",
					confirmColor: "#eb0909",
					confirmText: "确定",
					success(res) {
						if (res.confirm) {
							that.tutorServiceShow = true
							that.tutorServiceTitle = '结束打卡图'


							//  tutorOrderEnd({userType:2,status:5,orderId:that.orderDetails.ordersVo.id}).then(res=>{
							//  	if(res.code===200){
							// 		that.$utils.toast('结束成功')
							// 		that.getData()
							// 		that.$emit('refreshOrderList',true)
							// 	}
							//  })
						}
					}
				})
			},
			//  确认服务
			handleConfirm(data) {
				let that = this
				// that.$utils.toast('结束成功')
				// that.getData()
				// uni.$emit('refreshOrderList', true)
				// uni.navigateBack({
				// 	delta: 1
				// });
				// return
				if (that.tutorServiceTitle === '结束打卡图') {
					tutorOrderEnd({
						userType: 2,
						status: 5,
						orderId: that.orderDetails.ordersVo.id,
						endClockImage: data.masterImg,
						coordinates: {
							lat: data.latitude,
							lng: data.longitude
						}
					}).then(res => {
						console.log(res)
						if (res.code === 200) {
							that.$utils.toast('结束成功')
							that.getData()
							uni.$emit('refreshOrderList', true)
							uni.navigateBack({
								delta: 1
							});
						}
					}).finally(() => {
						that.$refs.tutorServiceRed.saveLoading = false
					}).catch(err => {
						console.log(err)
					})
					return
				}

				tutorOrderAcess({
						userType: 2,
						status: 4,
						orderId: that.orderDetails.ordersVo.id,
						clockImage: data.masterImg,
						coordinates: {
							lat: data.latitude,
							lng: data.longitude
						}
					}).then(res => {
						if (res.code === 200) {
							that.$utils.toast('开始成功')
							that.tutorServiceShow = false
							that.getData()
							uni.$emit('refreshOrderList', true)
							uni.navigateBack({
								delta: 1
							});
						}
					})
					.finally(() => {
						that.$refs.tutorServiceRed.saveLoading = false
					})
			},
			//开始服务
			startServe() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开始此订单服务',
					showCancel: true,
					cancelColor: "#555",
					confirmColor: "#eb0909",
					confirmText: "确定",
					success(res) {
						if (res.confirm) {
							that.tutorServiceShow = true
							that.tutorServiceTitle = '打卡图'
							//  tutorOrderAcess({userType:2,status:4,orderId:that.orderDetails.ordersVo.id}).then(res=>{
							//  	if(res.code===200){
							// 		that.$utils.toast('开始成功')
							// 		that.getData()
							// 		that.$emit('refreshOrderList',true)

							// 	}
							//  })
						}
					}
				})
			},
			//取消订单
			caclOrder() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消该订单吗？',
					showCancel: true,
					cancelColor: "#555",
					confirmColor: "#eb0909",
					confirmText: "确定",
					success(res) {
						if (res.confirm) {
							cancelOrder(that.orderDetails.ordersVo.id).then(res => {
								if (res.code === 200) {
									that.$utils.toast('取消成功')
									that.getData()
									uni.$emit('refreshOrderList', true)
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	@import './orderTutorDetails.scss';

	.takeOrder {
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 6rpx 0rpx rgba(214, 214, 214, 0.25);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
	}

	.takeOrders {
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 6rpx 0rpx rgba(214, 214, 214, 0.25);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		width: calc(100vw - 80rpx);
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		padding-bottom: 60rpx;
	}
</style>